<template>
  <div class="v-time-picker" ref="vtimePicker">
    <v-input
      v-model="dispValue"
      :placeHolder="placeholder"
      :disabled="disabled"
      @focus="focus"
    ></v-input>
    <transition name="fade">
      <div v-if="showVTime" class="v-time_drop">
        <v-time></v-time>
      </div>
    </transition>
  </div>
</template>
<script>
import VInput from "../input/input.vue";
import VTime from "./time.vue";
import Emitter from "../../assets/emitter";
export default {
  name: "VTimePicker",
  componentName: "VTimePicker",
  components: {
    VInput,
    VTime,
  },
  mixins: [Emitter],
  data() {
    return {
      hour: [],
      minute: [],
      second: [],
      position: 0,
      showVTime: false,
    };
  },
  props: {
    value: String,
    placeholder: String,
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    dispValue: {
      get() {
        return this.value;
      },
      set(val) {
        console.log(val);
        return val;
      },
    },
  },
  created() {},
  mounted() {
    //先不考虑拉下选择框位置问题（根据timepicker位置决定是向上还是向下）
    // this.getPosition();
  },
  methods: {
    getPosition() {
      this.position = this.$refs.vtimePicker.getBoundingClientRect().top;
    },
    focus() {
      this.showVTime = true;
      this.$nextTick().then(() => {
        this.broadcast("VTime", "init", this.value);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
    opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center top;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
  transform: scaleY(0);
}
</style>
